<template>
  <div class="comment">
    <div class="comment-avatar">
      <div class="commet-avatar-out">
        <img v-lazy="$utils.genImgUrl(comment.user.avatarUrl, 80)">
      </div>
    </div>
    <div class="comment-content">
      <p><span class="person-name">{{ comment.user.nickname }}:</span><span>{{ comment.content }}</span></p>
      <p class="comment-time">{{ $utils.formatDate(comment.time) }}</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: ['comment'],
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.comment {
  display: flex;
  padding: 1.8rem 0rem;
}
.comment > div:nth-child(1) {
  width: 2.85714rem;
  height: 2.85714rem;
}
.comment > div:nth-child(2) {
  flex: 1;
}
.comment-content p {
  padding-bottom: 0.8rem;
}
.person-name {
  color: #517efa;
}
.comment-time {
  color: #bebebe;
  font-size: 0.8rem;
}
.commet-avatar-out {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}
.commet-avatar-out img {
  width: 100%;
  height: 100%;
}
.comment-avatar {
  margin-right: 0.85714rem;
}
</style>